import { useEffect, useState } from 'react';
import './index.scss';
// 导入 Redux 相关的 action 和 hook
import { setQuestions, setAnswersId, findrigthAnswer } from '../../store/modules/questional';
import { useDispatch } from 'react-redux';
// 导入类型定义
import type { Ques, Answer } from '../../store/index.ts';
// 导入路由导航
import { useNavigate } from 'react-router-dom';

export default function Index() {
    // 状态管理：
    const [ques, setQues] = useState<Ques[]>([]); // 存储问题列表
    const [num, setNum] = useState(1);            // 当前题目序号（从1开始）
    const [isSelected, setIsSelected] = useState(false); // 用户是否已选择答案
    const [selectedAnswer, setSelectedAnswer] = useState<Answer>(); // 用户选择的答案
    const dispatch = useDispatch();                // Redux 的 dispatch 函数
    const navigate = useNavigate();                // 路由导航函数
    const [rightAnswers, setRightAnswers] = useState<(Answer | undefined)[]>([]); // 存储正确答案列表

    // 获取问题数据
    const getData = async () => {
        try {
            // 从API获取数据
            const response = await fetch('https://mock.mengxuegu.com/mock/6767738f98077b17fe6792e2/question-naire');
            const data = await response.json();

            // 将问题数据存入Redux store
            dispatch(setQuestions(data.questions));
            // 将问题数据存入组件状态
            setQues(data.questions);
            console.log(data);
            
            // 计算每道题的正确答案
            const arr = data.questions.map((question: Ques) =>
                question.topic_answer.find((item: Answer) => item.is_standard_answer === 1)
            );

            // 存储正确答案列表
            setRightAnswers(arr);
        } catch (error) {
            console.error('获取问题数据失败:', error);
        }
    };

    // 组件挂载时获取数据
    useEffect(() => {
        getData();
    }, []); // 空依赖数组表示只运行一次

    // 处理用户选择答案
    const selectAnswer = (item: Answer) => {
        setSelectedAnswer(item);   // 存储用户选择的答案
        setIsSelected(true);       // 标记用户已选择
    };

    // 处理下一题/提交操作
    const nextTopic = () => {
        // 检查用户是否已选择答案
        if (!isSelected) {
            alert('请选择答案');
            return;
        }

        // 保存用户选择的答案ID到Redux
        if (selectedAnswer) {
            dispatch(setAnswersId(selectedAnswer.topic_answer_id));
        }

        // 判断是否是最后一题
        if (num === ques.length) {
            // 提交所有答案并计算分数
            dispatch(findrigthAnswer(rightAnswers));
            // 导航到结果页面
            navigate('/result');
        } else {
            // 切换到下一题
            setNum(num + 1);
            // 重置选择状态
            setIsSelected(false);
            // 清空当前选择的答案
            setSelectedAnswer(undefined);
        }
    };

    // 渲染组件
    return (
        <div className='question-container'>
            {/* 顶部标题和进度条 */}
            <div className='question-container-hd'>
                <div className="question-container-hd-title">
                    第 {num}/{ques.length} 题
                </div>
                <div className="question-container-hd-progress">
                    {/* 动态进度条，根据当前题号计算宽度 */}
                    <div
                        className="question-container-hd-progress-bar"
                        style={{ width: `${(num / ques.length) * 100}%` }}
                    ></div>
                </div>
            </div>

            {/* 问题内容区域 */}
            <div className="question-container-bd">
                <div className="question-container-bd-option">
                    <div className="question-container-bd-option-card">
                        {/* 问题序号 */}
                        <div className="order">Q{num}</div>

                        {/* 问题标题 */}
                        <div className="title">
                            {ques[num - 1]?.topic_name}
                        </div>

                        {/* 答案选项列表 */}
                        <ul className='list'>
                            {ques[num - 1]?.topic_answer.map((item: Answer) => (
                                <li key={item.topic_answer_id}>
                                    {/* 单选按钮 */}
                                    <input
                                        type="radio"
                                        name='item'
                                        id={`item${item.topic_answer_id}`}
                                        onChange={() => selectAnswer(item)}
                                    />
                                    {/* 答案标签 */}
                                    <label htmlFor={`item${item.topic_answer_id}`}>
                                        {item.answer_name}
                                    </label>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>

            {/* 底部按钮 */}
            <div className="question-container-ft">
                <div className="btn" onClick={nextTopic}>
                    {/* 根据是否是最后一题显示不同文本 */}
                    {num === ques.length ? '提交' : '下一题'}
                </div>
            </div>
        </div>
    );
}